<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-27 15:41:29
 * @LastEditors: xuzehan 935351619@qq.com
 * @LastEditTime: 2024-05-28 14:44:27
 * @FilePath: \ant-design-vue-jeecg-master\src\views\networkStatus\modules\components\missileTerminal1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="statusBox">
    <div class="carStatusBox">
      <div class="infoDiv-buleBorder">
        <div class="queryBtn"  style="padding-left: 10px">
          <a-select placeholder="请选择" style="width:200px;" v-model="carInfo" @change="changeCar">
            <a-select-option
              :value="item.identificationCode"
              v-for="item in options"
              :key="item.id"
            >{{ item.name }} ({{item.identificationCode}})</a-select-option>
          </a-select>
          <a-popconfirm style="margin-left: 20px"  overlayClassName="poperLayTable"   title="确定发送状态查询指令吗?" @confirm="() => onChangeCar()" >
               <a-button type="primary">状态查询</a-button>
            </a-popconfirm>
          <!-- <a-button type="primary" style="margin-left: 10px" @click="onChangeCar">状态查询</a-button> -->
          <!-- <a-button type="primary" style="margin-left: 20px" @click="getData">刷新</a-button> -->
        </div>

        <div class="interStatus">
          <h2 style="font-size: 18px;">指控车在网状态: {{ this.form.onlineStatus == '0001' ? '异常' : this.form.onlineStatus == '0000' ? '在网':"*" }}</h2>
          <h2 style="font-size: 18px;">指控车设备状态: {{ this.form.deviceStatus == '0001' ? '异常' : this.form.deviceStatus == '0000' ? '正常':"*" }}</h2>
        </div>
        <div class="infoBox">
          <div class="leftInfo">
            <a-descriptions title :column="2" layout="vertical">
              <!-- <a-descriptions-item label="星指上行实时通信速率"> 124kbps </a-descriptions-item>
          <a-descriptions-item label="星指上行实时信噪比"> 10dB </a-descriptions-item>
          <a-descriptions-item label="星指下行实时通信速率"> {{ this.form.speedRange }} </a-descriptions-item>
              <a-descriptions-item label="星指下行实时信噪比"> {{ this.form.ratio }} </a-descriptions-item>-->
              <a-descriptions-item
                label="星指下行链路速率挡"
              >{{ form.speedRange==0?'640kbps': form.speedRange==1?'1.28Mbps':"*" }}</a-descriptions-item>
              <a-descriptions-item label="星指下行链路信噪比">{{ form.ratio? parseInt( form.ratio,16)+'dB':"*" }}</a-descriptions-item>
            </a-descriptions>
            <a-table bordered :columns="columns" :data-source="this.form.data" :pagination="false">
              <span
                slot="slotTotal"
                slot-scope="text, record"
              >{{record.slotInfo.split(',').length?record.slotInfo.split(',').length:"*"}}</span>
            </a-table>
          </div>
        </div>
      </div>

      <div class="infoBox">
        <div class="chartBox">
          <div class="queryData">
            <span :style="{ color: '#fff', 'font-size': '18px', 'margin-right': '15px' }">星指下行链路信噪比</span>
            <a-button type="primary" @click='handleChart("THIS_WEEK")'>本周</a-button>
            <a-button type  @click='handleChart("TODAY")'>当天</a-button>
            <a-button type @click='handleChart("HOUR")'>近一小时</a-button>
            <a-range-picker @change="onChange" />
          </div>
          <!-- <div class="chartsDiv"> -->
          <div id="main"></div>
          <!-- </div> -->
        </div>
      </div>
    </div>

    <a-table
      :columns="columns1"
      :data-source="data1"
    ></a-table>
  </div>
</template>

<script>
import { processDefineKey } from '@/api/processDefineKey'
import * as echarts from 'echarts'
import { Turns, sum, hex2int } from '@/utils/util.js'
import { mapGetters } from 'vuex'
import { getAction, httpAction } from '@/api/manage.js'
export default {
  props: ['froms'],
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },

  watch: {
    websocketMsg: {
      handler(val) {
        // 需要进行的操作
        if(val){
          let msg = JSON.parse(val)
          if (msg.cmd == 'COMMAND_VEHICLE_NETWORK_QUERY_RESPONSE') {
            this.getData()//list更新
            this.getByIdentificationCodeLatestValue()//左上表更新
            this.handleChart("THIS_WEEK")//chart更新
          }
        }
        console.log(val, '车网络状态页面----websocket推送的全局数据')

      },
    },
  },
  data() {

    const columns = [
      // {
      //   title: '',
      //   dataIndex: 'name',
      //   key: 'name',
      // },
      // {
      //   title: '频率资源使用状态',
      //   // title: 'Other',
      //   children: [
      //     {
      //       title: '上行信道号',
      //       dataIndex: 'uplinkDigitalFilter',
      //       key: 'uplinkDigitalFilter',
      //       customRender: function (text) {
      //         return text
      //         // return this.formatterUseDfInfo(text)
      //       },
      //     },
      //   ],
        // dataIndex: 'uplinkDigitalFilter',
        // key: 'uplinkDigitalFilter',
        // customRender: function (text) {
        //   return '频点号' + text
        // },
      // },
      {
        title: '时隙资源使用状态',
        children: [
        {
            title: '源码',
            dataIndex: 'uplinkDigitalFilter',
            key: 'uplinkDigitalFilter',
            customRender: function (text) {
              return text
              // return this.formatterUseDfInfo(text)
            },
          },
          {
            title: '时隙个数',
            dataIndex: 'slotTotal',
            key: 'slotTotal',
            scopedSlots: { customRender: 'slotTotal' },
            customRender: function (t, r, index) {
              return parseInt(t, 16)
            }
            // customRender: function (text) {
            //   console.log(text)
            //   return text.split('，').length
            // },
          },
          {
            title: '时隙号',
            dataIndex: 'slotInfo',
            key: 'slotInfo',
            customRender: function (t) {
              let temp = t
              let data = Turns(temp.slice(8, temp.length), 2).split('')
              let tempData = data.slice(2, data.length).reverse()
              let str = []
              tempData.forEach((e, index) => {
                if (e == 1) {
                  str.push(index)
                }
              });
              return str.join()
            }
            // sorter: (a, b) => a.age - b.age,
            // customRender: function (text) {
            //   return '时隙号' + text
            // },
          },
        ],
        // key: 'slotInfo',
        // dataIndex: 'slotInfo',
        // customRender: function (text) {
        //   return '时隙号：' + text
        // },
        // scopedSlots: { customRender: 'tags' },
      },
      // {
      //   title: 'Action',
      //   key: 'action',
      //   scopedSlots: { customRender: 'action' },
      // },
    ]

    const data = [
      // {
      //   key: '1',
      //   slotInfo: '1，2，3，4，5，6',
      //   name: '上行',
      //   uplinkDigitalFilter: 'F1',
      //   tags: ['nice', 'developer'],
      // },
    ]
    const columns1 = [
      {
        title: '序号',
        dataIndex: '',
        key: 'rowIndex',
        width: 70,
        align: 'center',
        customRender: function (t, r, index) {
          return parseInt(index) + 1
        },
      },
      {
        title: '时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 180,
        // scopedSlots: { customRender: 'createTime' },
      },

      {
        title: '车识别码',
        dataIndex: 'identificationCode',
        key: 'identificationCode',
        width: 100,
        // scopedSlots: { customRender: 'createTime' },

        customRender: function (t, r, index) {
          if (t) {
            return t
          } else {
            return '/'
          }
        },
      },
      {
        title: '在网状态',
        width: 110,
        // title: '指控车在网状态',
        dataIndex: 'onlineStatus',
        key: 'onlineStatus',
        customRender: function (t, r, index) {
          if (t == '0000') {
            return '在网'
          } else if (t == '0001') {
            return '不在网'
          }
        },
        // scopedSlots: { customRender: 'name' },
      },
      {
        title: '设备状态',
        // title: '指控车设备状态',
        dataIndex: 'deviceStatus',
        width: 110,
        key: 'deviceStatus',
        customRender: function (t, r, index) {
          if (t == '0000') {
            return '正常'
          } else if (t == '0001') {
            return '异常'
          }
        }
        // scopedSlots: { customRender: 'name' },
      },
      {
        title: '上行信道个数',
        dataIndex: 'uplinkDigitalFilterNum',
        key: 'uplinkDigitalFilterNum',
        // scopedSlots: { customRender: 'name' },
      },
      {
        title: '上行信道号',
        dataIndex: 'uplinkDigitalFilter',
        key: 'uplinkDigitalFilter',
        // scopedSlots: { customRender: 'name' },
      },
      {
        title: '时隙个数',
        dataIndex: 'slotTotal',
        key: 'slotTotal',
        width: 110,
        customRender: function (t, r, index) {
          return parseInt(t, 16)
        }
        // width: 220,
        // scopedSlots: { customRender: 'name' },
      },
      {
        title: '时隙号',
        dataIndex: 'slotInfo',
        key: 'slotInfo',
        width: 220,
        customRender: function (t) {
          let temp = t
          let data = Turns(temp.slice(8, temp.length), 2).split('')
          let tempData = data.slice(2, data.length).reverse()
          let str = []
          tempData.forEach((e, index) => {
            if (e == 1) {
              str.push(index)
            }
          });
          return str.join()
        }
      },
      {
        title: '星指下行链路信噪比',
        dataIndex: 'ratio',
        key: 'ratio',
        // ellipsis: true,
      customRender: function (t, r, index) {
          return parseInt(t, 16)+'dB'

        }
      },
      {
        title: '星指下行链路速率挡',
        dataIndex: 'speedRange',
        key: 'speedRange',
        // ellipsis: true,
        customRender: function (t, r, index) {
          // return parseInt(t, 16)
          if (t == 0) {
            return '640kbps'
          } else if (t == 1) {
            return '1.28Mbps'
          } else {
            return '/'
          }
        }

      },
    ]

    const data1 = [
      {
        key: '0',
        slotInfo: '1，2，3，4，5，6',
        createTime: '2022/12/15 12:35:15',
        slotTotal: '6',
        onlineStatus: '在网',
        deviceStatus: '正常',
        uplinkDigitalFilter: 'F1',
        ratio: '8',
        speedRange: '96',
      }, {
        key: '1',
        slotInfo: '1，2，3，4，5，6',
        createTime: '2022/12/15 12:35:15',
        slotTotal: '6',
        onlineStatus: '在网',
        deviceStatus: '正常',
        uplinkDigitalFilter: 'F1',
        ratio: '8',
        speedRange: '96',
      },
      {
        key: '2',
        slotInfo: '7，8，9，10，11，12',
        createTime: '2022/12/15 12:35:15',
        slotTotal: '6',
        onlineStatus: '在网',
        deviceStatus: '正常',
        uplinkDigitalFilter: 'F1',
        ratio: '10',
        speedRange: '64',
      },
      {
        key: '3',
        slotInfo: '7，8，9，10，11，12',
        createTime: '2022/12/15 12:35:15',
        slotTotal: '6',
        onlineStatus: '在网',
        deviceStatus: '异常',
        uplinkDigitalFilter: 'F1',
        ratio: '10',
        speedRange: '64',
      },
    ]
    return {
      onlineStatus: '在网',
      data,
      columns,
      data1,
      options: [],
      columns1,
      xData:[],
      chartData:[],
      form: { data: [{ uplinkDigitalFilter: "*", slotInfo: "*", }] },
      // form: { speedRange: '96kbps', ratio: '15dB', onlineStatus: '0001', deviceStatus: '0000', data: [{ uplinkDigitalFilter: "F11", slotInfo: "1,2,3,4,5,6", }] },
      // onlineStatus: '',
      carInfo: undefined,
      url: {
        sendPackage: '/channel/nmcChannelInfo/sendPackage',
        getNmcPackageGridValueByCode: '/grid/nmcPackageGridValue/code',
        carlist: '/commandVehicle/nmcCommandVehicle/queryRunningFightDemandOfCommandVehicle',
        nmcNcvNetworkQuery: "/ncvNetwork/nmcNcvNetworkQuery/list",
        getLatestPackageGridValues: '/grid/nmcPackageGridValue/getLatestPackageGridValues',
        getRatioLineChartData:'/ncvNetwork/nmcNcvNetworkQuery/getRatioLineChartData',
        getByIdentificationCodeLatestValue:"/ncvNetwork/nmcNcvNetworkQuery/getByIdentificationCodeLatestValue",
        getByIdentificationCodeLatestValueAndFightDemandId:"/ncvNetwork/nmcNcvNetworkQuery/getByIdentificationCodeLatestValueAndFightDemandId"
      },
    }
  },
  activated() {
    this.initChart()
    this.getCarList()
    this.getData()
  },
  mounted() {
    this.getCarList()
    this.initChart()
    this.getData()
    console.log(this.websocketNum,'------------');
  },
  methods: {
    getByIdentificationCodeLatestValue(){
      if(!this.carInfo)return
      getAction(this.url.getByIdentificationCodeLatestValue,{identificationCode:this.carInfo}).then(res=>{
        if (res.success) {
          if(res.result){
            this.form=res.result
            this.form.data=[{ uplinkDigitalFilter: this.form.uplinkDigitalFilter, slotTotal: this.form.slotTotal, slotInfo: this.form.slotInfo }]
          }else{
            this.form = {};
            this.form.data = [];
            this.$message.error('暂时没有回复')
          }
        }
      })
    },
    formatterUseDfInfo(val) {

let data = JSON.parse(val)
console.log(data)
// let arr = data.length ? data.split(',') : []
let arr = data.map(i => {
  return parseInt(i, 16)
})
// console.log(parseInt('0058', 16), 'data', arr)
return arr.join()
},
    handleChart(type){
      // queryType:type,
      httpAction(this.url.getRatioLineChartData,{identificationCode:this.carInfo,queryType:type},'post').then(res=>{
        console.log(res,'-----------')
        this.xData==[...res.result.xdata]

        this.chartData=[...res.result.ydata]
        this.initChart()
      })
    },
    changeCar(val) {
      let select=this.options.find(i=>i.identificationCode==val)
      let data={
        fightDemandId:select.fightDemandId,
        identificationCode:val
      }
       getAction(this.url.getByIdentificationCodeLatestValueAndFightDemandId,data).then(res => {
        if (res.success) {
          if(res.result){
            this.form=res.result
            this.form.data=[{ uplinkDigitalFilter: this.form.uplinkDigitalFilter, slotTotal: this.form.slotTotal, slotInfo: this.form.slotInfo }]
          }else{
            this.form = {};
            this.form.data = [];
            this.$message.error('暂时没有回复')
          }
        }
      });
      this.handleChart("THIS_WEEK")//chart更新
    },
    getData() {
      getAction(this.url.nmcNcvNetworkQuery, { pageSize: -1 }).then(res => {
        console.log(res, '查询历史')
        if (res.success) {
          if (res.result.records.length > 0) {
            this.data1 = res.result.records
            // this.form = res.result.records[0]
            // this.form.data = [{ uplinkDigitalFilter: this.form.uplinkDigitalFilter, slotTotal: this.form.slotTotal, slotInfo: this.form.slotInfo }]
          } else {
            this.data1 = []
          }
        }
      })
    },
    onChangeCar(value) {
      console.log(value)
      let params = {
        nmcPackageGridValues: [
          {
            gridCode: '17-接收端识别码',
            packageGridValue: this.carInfo,
          },
        ],
        packageCode: '17指挥车网络状态查询指令',
      }
      httpAction(this.url.sendPackage, params, 'post').then((res) => {
        if (res.code == 200) {
          this.$message.success('发包成功！')
          setTimeout(() => {
            let data = {
              packageCode: "18指挥车网络状态回复",
              businessId: this.carInfo,
              processDefineKey: processDefineKey.CommandVehicleNetworkQueryResponseHandleImplKey
            }
            this.getData()
            getAction(this.url.getLatestPackageGridValues, data).then(res => {
              console.log(res, '18指挥车网络状态回复')
              //收到状态回复并进行赋值-未完
              let result = res.result
              this.form.onlineStatus = result.find(i => i.gridCode == "18-指控车在网状态").packageGridValue
              this.form.deviceStatus = result.find(i => i.gridCode == "18-指挥车设备状态").packageGridValue
              this.form.speedRange = result.find(i => i.gridCode == "18-星指下行链路使用速率档位").packageGridValue
              this.form.ratio = result.find(i => i.gridCode == "18-星指下行链路信噪比").packageGridValue
              if(this.form.deviceStatus=='0001'){
                this.$notification[type]({
                    message: 'Notification Title',
                    description:
                      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
                  });
              }
            })
          }, 500)
        } else {
          this.$message.error(res.message)
        }
      })


    },
    handleQuery() {
      // let temp = { packageCode: '17指挥车网络状态查询指令' }
      // this.$refs.selectChannel.showModal(temp)
      this.$emit('handleQuery')
    },
    getCarList() {
      getAction(this.url.carlist, { pageSize: -1 }).then((res) => {
        this.options = res.result
      })
    },
    // statusQuery() {
    //   // '18-指挥车设备状态'
    //   // this.getValueByCode()
    // },
    // getValueByCode() {
    //   getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-指挥车设备状态')}`).then((res) => {
    //     let temp = res.result
    //     this.onlineStatus = temp.packageGridValue
    //   })
    //   getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-星指下行链路使用速率档位')}`).then((res) => {
    //     let temp = res.result
    //     this.form.speedRange = temp.packageGridValue
    //     console.log(this.form, '18-星指下行链路使用速率档位')
    //   })
    //   getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-星指下行链路信噪比')}`).then((res) => {
    //     let temp = res.result
    //     this.form.ratio = temp.packageGridValue
    //     console.log(this.form, '18-星指下行链路信噪比')
    //   })
    //   getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-星指下行链路频点号')}`).then((res) => {
    //     let temp = res.result
    //     // this.form.downFrequencyPointtime = temp.packageGridValue
    //     this.data[1].uplinkDigitalFilter = temp.packageGridValue
    //     console.log(this.data[1].uplinkDigitalFilter, '18-星指下行链路频点号')
    //   })
    //   getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-星指上行链路频点号')}`).then((res) => {
    //     let temp = res.result
    //     // this.form.upFrequencyPointtime = temp.packageGridValue
    //     this.data[0].uplinkDigitalFilter = temp.packageGridValue
    //     console.log(this.data[0].uplinkDigitalFilter, '18-星指上行链路频点号')
    //   })
    //   getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-使用具体的时隙号')}`).then((res) => {
    //     let temp = res.result
    //     console.log(temp, 'temp')
    //     // this.form.slottime = temp.packageGridValue
    //     this.data[0].slotInfo = temp.packageGridValue
    //     console.log(this.data[0].slotInfo, '18-使用具体的时隙号')
    //   })
    // },


    onChange(date, dateString) {
      console.log(date, dateString)
      httpAction(this.url.getRatioLineChartData,{identificationCode:this.carInfo,startDate:dateString[0],endDate:dateString[1],},'post').then(res=>{
        console.log(res,'-----------')
        this.xData==[...res.result.xdata]

        this.chartData=[...res.result.ydata]
        this.initChart()
      })

    },
    initChart() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        xAxis: {
          type: 'category',
          // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          data: this.xData,
        },
        yAxis: {
          type: 'value',
          name: '单位：dB',
          // axisLabel: {
          //   formatter: '{value}',
          // },
        },
        tooltip: {
          // 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
          trigger: 'axis', // 鼠标只要在轴上就会触发
        },
        series: [
          {
            data: this.chartData,
            type: 'line',
            smooth: true,
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.interStatus {
  display: flex;
  padding: 10px;
  width: 100%;
  justify-content: space-between;
  h2 {
    color: #fff;
    // margin-right: 30px;

  }
}
.infoBox {
  display: flex;
  // flex-direction: column;
  justify-content: space-between;
  .leftInfo {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .ant-descriptions {
      // width: 400px;
      text-align: center;
      padding: 8px 15px;
      border: 1px solid #3a8ee6;
      margin-bottom: 20px;
    }
  }

  .chartBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    .queryData {
      // margin-top: 10px;
      span {
        margin-right: 35px;
      }
      .ant-btn {
        margin: 8px;
      }
    }
    // .chartsDiv {
    //   width: 50%;
    //   margin: auto;
    #main {
      width: 500px;
      height: 300px;
    }
    // }
  }
}
.statusBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px 0;
  .carStatusBox {
    display: flex;
    justify-content: space-around;
  }
}
.infoDiv-buleBorder {
  margin: 20px 0px;
  padding: 25px 35px;
  width: 50%;
  // height: 300px;
  border: 1px solid #1a7683;
  position: relative;
  display: flex;
  background: rgba(6, 31, 71, 0.5);
  flex-direction: column; /*默认也是row可以不写*/
  justify-content: center;
  align-items: center;
  .queryBtn {
    width: 100%;
    display: flex;
    justify-content: start;
  }
}
.infoDiv-buleBorder:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 8px;
  background: #44defd;
  box-sizing: border-box;
}
.infoDiv-buleBorder:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 8px;
  background: #44defd;
  box-sizing: border-box;
}


.infoBox .ant-descriptions-item-label{

  font-size: 16px !important;
}
</style>
<style >
.ant-table-header {
  background: #409eff !important;
  border: none !important;
}
.infoBox .ant-descriptions-item  .ant-descriptions-item-label {
  font-size: 16px !important;
}
</style>
